<template>
    <div>
        <el-row :gutter="15">
            <el-form
                ref="elForm"
                :model="formData"
                :rules="rules"
                size="small"
                label-width="100px"
            >
                <el-col :span="12">
                    <el-row :gutter="15">
                        <el-col :span="24">
                            <el-form-item
                                label-width="160px"
                                label="票据号"
                                prop="billNo"
                            >
                                <el-input
                                    v-model="formData.billNo"
                                    placeholder="请输入票据号"
                                    clearable
                                    :style="{ width: '100%' }"
                                >
                                </el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="24">
                            <el-form-item
                                label-width="160px"
                                label="票据类型"
                                prop="billType"
                            >
                                <el-input
                                    v-model="formData.billType"
                                    placeholder="请输入票据类型"
                                    clearable
                                    :style="{ width: '100%' }"
                                ></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="24">
                            <el-form-item
                                label-width="160px"
                                label="背书退回日期"
                                prop="updateTime"
                            >
                                <el-date-picker
                                    v-model="formData.updateTime"
                                    format="yyyy-MM-dd"
                                    value-format="yyyy-MM-dd"
                                    :style="{ width: '100%' }"
                                    placeholder="请选择退回背书日期"
                                    clearable
                                ></el-date-picker>
                            </el-form-item>
                        </el-col>
                        <el-col :span="24">
                            <el-form-item
                                label-width="160px"
                                label="被背书单位"
                                prop="endorsedDeptId"
                            >
                                <el-input
                                    v-model="formData.endorsedDeptId"
                                    placeholder="请输入被背书单位"
                                    clearable
                                    :style="{ width: '100%' }"
                                ></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="24">
                            <el-form-item
                                label-width="160px"
                                label="汇率类型"
                                prop="rateType"
                            >
                                <el-input
                                    v-model="formData.rateType"
                                    placeholder="请输入汇率类型"
                                    clearable
                                    :style="{ width: '100%' }"
                                ></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="24">
                            <el-form-item
                                label-width="160px"
                                label="汇率"
                                prop="rate"
                            >
                                <el-input
                                    v-model="formData.rate"
                                    placeholder="请输入汇率"
                                    clearable
                                    :style="{ width: '100%' }"
                                >
                                </el-input>
                            </el-form-item>
                        </el-col>
                    </el-row>
                </el-col>
                <el-col :span="12">
                    <el-row :gutter="15">
                        <el-col :span="24">
                            <el-form-item
                                label-width="160px"
                                label="币别"
                                prop="kingBaseCurrencyId"
                            >
                                <el-input
                                    v-model="formData.kingBaseCurrencyId"
                                    placeholder="请输入币别"
                                    clearable
                                    :style="{ width: '100%' }"
                                ></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="24">
                            <el-form-item
                                label-width="160px"
                                label="背书退回金额"
                                prop="reciteAmount"
                            >
                                <el-input
                                    v-model="formData.reciteAmount"
                                    placeholder="请输入背书退回金额"
                                    clearable
                                    :style="{ width: '100%' }"
                                ></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="24">
                            <el-form-item
                                label-width="160px"
                                label="背书类型"
                                prop="reciteType"
                            >
                                <el-input
                                    v-model="formData.reciteType"
                                    placeholder="请输入背书类型"
                                    clearable
                                    :style="{ width: '100%' }"
                                ></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="24">
                            <el-form-item
                                label-width="160px"
                                label="收款组织"
                                prop="receiptDeptId"
                            >
                                <el-input
                                    v-model="formData.receiptDeptId"
                                    placeholder="请输入收款组织"
                                    clearable
                                    :style="{ width: '100%' }"
                                ></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="24">
                            <el-form-item
                                label-width="160px"
                                label="被背书单位类型"
                                prop="endorsedDeptType"
                            >
                                <el-input
                                    v-model="formData.endorsedDeptType"
                                    placeholder="请输入被背书单位类型"
                                    clearable
                                    :style="{ width: '100%' }"
                                ></el-input>
                            </el-form-item>
                        </el-col>
                    </el-row>
                </el-col>
            </el-form>
        </el-row>
    </div>
</template>
<script>
import { reciteRefundInfo } from "@/api/finance/receivebill";
export default {
    props: ["rowId"],
    data() {
        return {
            formData: {
                billNo: undefined,
                billType: undefined,
                updateTime: null,
                endorsedDeptId: undefined,
                rateType: undefined,
                rate: undefined,
                kingBaseCurrencyId: undefined,
                reciteAmount: undefined,
                reciteType: undefined,
                receiptDeptId: undefined,
                endorsedDeptType: undefined,
            },
            rules: {
                billNo: [],
                billType: [],
                updateTime: [
                    {
                        required: true,
                        message: "请选择背书日期",
                        trigger: "change",
                    },
                ],
                endorsedDeptId: [
                    {
                        required: true,
                        message: "请输入被背书单位",
                        trigger: "blur",
                    },
                ],
                rateType: [
                    {
                        required: true,
                        message: "请输入汇率类型",
                        trigger: "blur",
                    },
                ],
                rate: [
                    {
                        required: true,
                        message: "请输入汇率",
                        trigger: "blur",
                    },
                ],
                kingBaseCurrencyId: [],
                reciteAmount: [
                    {
                        required: true,
                        message: "请输入背书金额",
                        trigger: "blur",
                    },
                ],
                reciteType: [
                    {
                        required: true,
                        message: "请输入背书类型",
                        trigger: "blur",
                    },
                ],
                receiptDeptId: [
                    {
                        required: true,
                        message: "请输入收款组织",
                        trigger: "blur",
                    },
                ],
                endorsedDeptType: [
                    {
                        required: true,
                        message: "请输入被背书单位类型",
                        trigger: "blur",
                    },
                ],
            },
        };
    },
    methods: {
        submit(cb) {
            this.$refs["elForm"].validate((valid) => {
                if (!valid) return;
                // TODO 提交表单
                if (this.rowId) {
                    reciteRefundInfo(this.formData).then((res) => {
                        if (res.code === 200) {
                            this.$message({
                                message: "操作成功！",
                                type: "success",
                            });
                            cb();
                        }
                    });
                }
            });
        },
    },
    mounted() {
        if (this.rowId) {
            console.log(this.rowId);
            getDetail(this.rowId).then((res) => {
                if (res.code === 200) {
                    this.formData = {
                        ...this.formData,
                        ...res.data.kingFinanceReceiptBillEntity,
                    };
                }
            });
        }
    },
};
</script>
<style></style>
